<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0" />
		<title></title>
		<link rel="stylesheet" href="jquery.mobile.min.css" />
		<link rel="stylesheet" type="text/css" href="app.css" />
		<link rel="stylesheet" href="mui.min.css" />
		<script src="jquery-2.1.4.min.js"></script>
		<script src="jquery.mobile.min.js"></script>
		
    <script>
    	$("#mypanel").trigger("updatelayout");
    </script>
	</head>

	<body>
		<div data-role="page" id="login">
			<div data-role="content">
				<img src="image.png" style="width: 50%;margin-left: 25%;" />
					<input type="text" name="username" id="username" placeholder="账号:" />
					<input type="text" name="password" id="password" placeholder="密码:" />
					<fieldset >
						<div>
							<button type="submit" data-theme="e" onclick="getdata()">登录</button>
							<a href="#registerpage" data-role="button" id="login" >注册</a>
						</div>
					</fieldset>
			</div>
		</div>
		
		<!--
        	作者：1005914681@qq.com
        	时间：2019-11-12
        	描述：
        -->
       <div data-role="page" id="registerpage">
       	<div data-role="header" data-position="fixed">
				<a href="#login" data-icon="back" data-iconpos="notext">返回</a>
				<h1>注册</h1>
			</div>
			<div data-role="content">
					<input type="text" name="reusername" id="reusername" placeholder="账号:" />
					<input type="text" name="repassword" id="repassword" placeholder="密码:" />
					<input type="text" name="renumber" id="renumber" placeholder="请输入你的手机号码:"/>
					<input type="text" name="reenternane" id="reentername" placeholder="请输入你的姓名:" />
					<fieldset >
						<div>
							<button type="submit" data-theme="e" onclick="register()">登录</button>
						</div>

					</fieldset>
				</form>
			</div>
		</div>
        <!--
        	作者：1005914681@qq.com
        	时间：2019-11-12
        	描述：
        -->
		<div data-role="page" id="jieshao">
			<div data-role="panel" id="mypanel" style="background-color: #D6D6D6;">
			<div data-role="content">
				<h4>当前登录的用户姓名为：</h4>
				<span id="enter_name"></span>
				<h4>当前登录的用户手机号为：</h4>
				<span id="enter_number"></span>
				
			</div>
		     </div>
	      <div data-role="header" data-position="fixed">
	      	<a href="#mypanel" onclick="getentername()">关于</a>
				<h1>介绍</h1>
				<a href="#login" onclick="loginout()">退出登录</a>
			</div>
			<div data-role="content">
				<fieldset class="ui-grid-a">
					<div class="ui-block-a">
						<img src="queen.jpg" width="100%" height="100%" />
					</div>
					<div class="ui-block-b">
						<h1 id="find_name" name="find_name"></h1>
						<p>联系方式:<span id="find_number"></span></p>
					</div>
				</fieldset>
				<br />
				<span>自我介绍</span>
				<br />
				<span id="find_content"></span>
			</div>
           <div data-role="content">
				<div class="mui-card-footer">
					<input type="text" id="pinglun" name="pinglun"/>
					<a class="mui-card-link"><button type="submit" class="mui-btn" onclick="submitpinglun()">评论</button></a>
				</div>
				<a><button type="button" onclick="getlistpl()">查看评论</button></a>
	             <div class="mui-content" >
              <ul class="mui-table-view" id="listpinglun">
             </div>
           
           </div>
           
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar" data-grid="c">
					<ul>
						<li>
							<a id="jieshao" href="#jieshao">介绍自己</a>
						</li>
						<li>
							<a id="guiji" onclick="getpartjs()" href="#guiji">成长轨迹</a>
						</li>
						<li>
							<a id="like" href="#like" onclick="getlike()">喜欢的</a>
						</li>
						<li>
							<a id="yinxiang" href="#yinxiang" onclick="getyx()">印象</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--
    	作者：1005914681@qq.com
    	时间：2019-11-02
    	描述：
    -->
		<div data-role="page" id="guiji">
			<div data-role="header" data-position="fixed">
				<a href="#jieshao" data-icon="back" data-iconpos="notext">返回</a>
				<h1>成长轨迹</h1>
			</div>
			<div data-role="content" id="guijilist">
			</div>
			
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar" data-grid="c">
					<ul>
						<li>
							<a id="jieshao" href="#jieshao">介绍自己</a>
						</li>
						<li>
							<a id="guiji" onclick="getpartjs()" href="#guiji">成长轨迹</a>
						</li>
						<li>
							<a id="like" href="#like" onclick="getlike()">喜欢的</a>
						</li>
						<li>
							<a id="yinxiang" href="#yinxiang" onclick="getyx()">印象</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!--
    	作者：1005914681@qq.com
    	时间：2019-11-02
    	描述：
    -->
		<div data-role="page" id="like">
			<div data-role="header" data-position="fixed">
				<a href="#jieshao" data-icon="back" data-iconpos="notext">返回</a>
				<h1>喜欢的东西</h1>
			</div>
			<div data-role="content">
			<div data-role="controlgroup" >
				<a href="#" data-role="button" id="like_header"></a>
				<a href="#" data-role="button">
					<img src="dpcq.jpg" style="width: 80%;"/>
				</a>
				<a href="#" data-role="button" id="like_author"></a>
				<a href="#" data-role="button" id="like_content"></a>
			</div>
				<a href="#likesee" data-role="button" onclick="gethref()">观看</a>
		    </div>

			<div data-role="footer" data-position="fixed">
				<div data-role="navbar" data-grid="c">
					<ul>
						<li>
							<a id="jieshao" href="#jieshao">介绍自己</a>
						</li>
						<li>
							<a id="guiji" onclick="getpartjs()" href="#guiji">成长轨迹</a>
						</li>
						<li>
							<a id="like" href="#like" onclick="getlike()">喜欢的</a>
						</li>
						<li>
							<a id="yinxiang" href="#yinxiang" onclick="getyx()">印象</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--
    	作者：1005914681@qq.com
    	时间：2019-11-02
    	描述
    -->
		<div data-role="page" id="yinxiang">
			<div data-role="header" data-position="fixed">
				<a href="#jieshao" data-icon="back" data-iconpos="notext">返回</a>
				<h1>印象</h1>
			</div>
			<div data-role="content" id="yxlist">
			</div>

			<div data-role="footer" data-position="fixed">
				<div data-role="navbar" data-grid="c">
					<ul>
						<li>
							<a id="jieshao" href="#jieshao">介绍自己</a>
						</li>
						<li>
							<a id="guiji" onclick="getpartjs()" href="#guiji">成长轨迹</a>
						</li>
						<li>
							<a id="like" href="#like" onclick="getlike()">喜欢的</a>
						</li>
						<li>
							<a id="yinxiang" href="#yinxiang" onclick="getyx()">印象</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	<!--
    	作者：1005914681@qq.com
    	时间：2019-11-13
    	描述：
    -->
    <div data-role="page" id="likesee">
			<div data-role="header" data-position="fixed">
				<a href="#jieshao" data-icon="back" data-iconpos="notext">返回</a>
				<h1>观看小说</h1>
			</div>
			<div data-role="content" id="likelist">
			</div>

			<div data-role="footer" data-position="fixed">
				<div data-role="navbar" data-grid="c">
					<ul>
						<li>
							<a id="jieshao" href="#jieshao">介绍自己</a>
						</li>
						<li>
							<a id="guiji" onclick="getpartjs()" href="#guiji">成长轨迹</a>
						</li>
						<li>
							<a id="like" href="#like" onclick="getlike()">喜欢的</a>
						</li>
						<li>
							<a id="yinxiang" href="#yinxiang" onclick="getyx()">印象</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script>
		function getdata() {
			var url = 'http://localhost:8080/enterController/partenterServlet';
			var username = $("#username").val();
			var password = $("#password").val();
			if(username == "") {
				alert("账号不能为空！");
				$('#username').focus();
				window.location.reload();

			} else if(password == "") {
				alert("密码不能为空！");
				$('#password').focus(); //判断输入框是否有值
				window.location.reload();

			} else {
				var s = {
					"username": username, //数据打包
					"password": password,

				};
				$.ajax({
					type: "post", //post方式传输，比get更加密安全
					url: url, //请求地址
					data: s, //打包data
					dataType: "json", //json传输方式
					success: function(data) {
						var str = JSON.stringify(data);
						localStorage.setItem("enteruser", data.username);
						localStorage.setItem("entername", data.entername);
						localStorage.setItem("number",data.number);
						getname();
					},
					error: function() {
						alert("失败");
					}
				})
			}
		}
	</script>

	<script type="text/javascript">
		function getname() {

			$.ajax({
					type: "post", //post方式传输，比get更加密安全
					url: 'http://localhost:8080/usercontroller/partServlet', //请求地址
					dataType: "json", //json传输方式
					success: function(data) {
						$('#find_name').text(data.usname);
						$('#find_number').text(data.number);
						$('#find_content').text(data.content);
						window.location.href = "#jieshao";
						
					},
					error: function() {
						alert("失败");
					}
				})
			}
	</script>
	<script type="text/javascript">
		function getpartjs() {
			var url = 'http://localhost:8080/guijiController/partlistServlet';
			$.ajax({
				type: "post", //post方式传输，比get更加密安全
				url: url, //请求地址
				dataType: "json", //json传输方式
				success: function(data) {
					var str = [];
					$("#guijilist").empty();
					for(var i = 0; i < data.length; i++) {
						var html = 
				            '<div class="mui-card">' +
							'<div class="mui-card-header mui-card-media" style="height:60vw;background-image:url(' + data[i].images + ');width: 100%;"></div>' +
							'<div class="mui-card-content">' +
							'<div class="mui-card-content-inner">' +
							'<p>发表时间'+data[i].guijitime+'</p>'+
							'<p style="color: #333;">' + data[i].part_content + '</p>' +
							'</div>' +
							'</div>' +
							'</div>'

						str.push(html);
					}
					//最后一块append
					$("#guijilist").append(str);
					$('#guijilist').listview('refresh');
				},
				error: function() 
					alert("失败");
				}
			})
		}
	</script>
	<script src="mui.min.js"></script>
	<script type="text/javascript">
		function getlike() {
			var url = 'http://localhost:8080/likeController/partlikeServlet';
			$.ajax({
				type: "post", //post方式传输，比get更加密安全
				url: url, //请求地址
				dataType: "json", //json传输方式
				success: function(data) {
						$('#like_author').text(data.author);
						$('#like_header').text(data.header);
						$('#like_content').text(data.likecontent);

				},
				error: function() {
					alert("失败");
				}
			})
		}
	</script>
	<script type="text/javascript">
		function getyx() {
			var url = 'http://localhost:8080/yxController/partyxServlet';
			$.ajax({
				type: "post", //post方式传输，比get更加密安全
				url: url, //请求地址
				dataType: "json", //json传输方式
				success: function(data) {
					var str = [];
					$("#yxlist").empty();
					for(var i = 0; i < data.length; i++) {
						var html = '<div class="mui-card">'+
						           '<div class="mui-card-header">时间：'+data[i].yxtime+'</div>'+
			                       '<div class="mui-card-content">'+
					               '<div class="mui-card-content-inner">人物：'+data[i].yxname+'</div>'+
					               '</div>'+
					               '<div class="mui-card-footer">内容：'+data[i].yxcontent+'</div>'+
					               '</div>'

						str.push(html);
					}
					//最后一块append
					$("#yxlist").append(str);
					$('#yxlist').listview('refresh');

				},
				error: function() {
					alert("失败");
				}
			})
		}
	</script>
	<script type="text/javascript">
		function getentername(){
			$('#enter_name').text(localStorage.getItem("enteruser"));
			$('#enter_number').text(localStorage.getItem("number"));
		}
	</script>
	<script type="text/javascript">
	function submitpinglun(){
	      var url = 'http://localhost:8080/pinglunController/partplServlet';
	      var pinglun = $("#pinglun").val();
	      var str8=localStorage.getItem("entername")
	      var s5 = {
					"pinglun": pinglun, //数据打包
					"entername":str8 ,
					};
			$.ajax({
					type: "post", //post方式传输，比get更加密安全
					url: url, //请求地址
					data:s5,
					dataType: "json", //json传输方式
					success: function(data) {
						if(data==1){
							alert("添加成功")
						}
					
					},
					error: function() {
						alert("失败");
					}
				})
			}
</script>
	<script type="text/javascript">
	function getlistpl(){
	      var url = 'http://localhost:8080/pinglunController/partpllistServlet';
			$.ajax({
					type: "post", //post方式传输，比get更加密安全
					url: url, //请求地址
					dataType: "json", //json传输方式
					success: function(data) {
					var str = [];
					$("#listpinglun").empty();
					for(var i = 0; i < data.length; i++) {
						var html = '<li class="mui-table-view-cell mui-media" >'+
					              '<a href="javascript:;">'+
						          '<div class="mui-media-body">'+'<p>用户名：'+data[i].entername+'</p>'+
							      '<p class="mui-ellipsis">评论内容：'+data[i].submitpl+'</p>'+
							      '<p class="ui-li-aside">'+data[i].localtime+'发表</p>'+
						          '</div>'+
					              '</a>'+
				                  '</li>'

						str.push(html);
					}
					//最后一块append
					$("#listpinglun").append(str);
					$('#listpinglun').listview('refresh');
					
					},
					error: function() {
						alert("失败");
					}
				})
			}
</script>
<script type="text/javascript">
	function register(){
		var url = 'http://localhost:8080/usercontroller/insert';
		var reusername=$("#reusername").val();
		var repassword=$("#repassword").val();
		var reentername=$("#reentername").val();
		var renumber=$("#renumber").val();
		if(reusername == "") {
				alert("不能为空！");
				$('#reusername').focus();
				window.location.reload();

			} else if(repassword== ""){
				alert("不能为空！");
				$('#repassword').focus();
				window.location.reload();
			}
			else if(reentername== ""){
				alert("不能为空！");
				$('#reentername').focus();
				window.location.reload();
			}
			else if(renumber== ""){
				alert("不能为空！");
				$('#renumber').focus();
				window.location.reload();
			}else{
				var s = {
					"reusername":reusername, //数据打包
					"repassword":repassword,
					"reentername":reentername,
					"renumber":renumber,
			}
				};
	           $.ajax({
					type: "post", //post方式传输，比get更加密安全
					url: url, //请求地址
					data:s,
					dataType: "json", //json传输方式
					success: function(data) {
						if(data==100){
							alert("注册成功")
						}
					},
					error: function() {
						alert("失败");
					}
				})
			}
</script>
<script type="text/javascript">
	function loginout(){
		localStorage.clear();
	}
</script>
<script type="text/javascript">
	function gethref(){
	  var url = 'http://localhost:8080/likeseeController/partlikeseeServlet';
			$.ajax({
					type: "post", //post方式传输，比get更加密安全
					url: url, //请求地址
					dataType: "json", //json传输方式
					success: function(data) {
					var str = [];
					$("#likelist").empty();
					for(var i = 0; i < data.length; i++) {
						var html = '<div class="mui-card">'+
			                       '<div class="mui-card-content">'+
					               '<div class="mui-card-content-inner">'+data[i].like_name+'</div>'+
					               '</div>'+
					               '<div class="mui-card-footer">'+data[i].like_content+'</div>'+
					               '</div>'

						str.push(html);
					}
					//最后一块append
					$("#likelist").append(str);
					$('#likelist').listview('refresh');
					
					},
					error: function() {
						alert("失败");
					}
				})
			}
</script>
</html>